<template>
  <div>
            <div class="title">
       <p class="iconfont icon-bg-left" @click="handleBack"></p>
       <p>光与影</p>
       <p class="iconfont icon-shenglvehao"></p>
     </div>

<div class="banner">
  <img class="banner_img" :src="list.pic"/> 
   <div class="banner_box">
     <div>{{list.title}}</div>
     <div>{{list.labels[0]}}.{{list.labels[1]}}</div>
    <div class="banner_box_font"><span>{{list.evaluate}}</span><span>人喜欢</span> <span>75351</span> <span>评论</span></div> 
   </div>
  <img class="banner_box_img" :src="list.pic"/> 
</div>

<div class="body">
   <div  class="body_title">{{list.slogo}}</div>
  <div class="body_detail">
   <div><span>评分:  </span><span>{{list.rating}}</span>
    <div  class="car" v-for="(a,index) of count" :key="index"/>
        <!-- <img  v-if="a>=1.5" src="/star.png" alt=""/>
        <img  v-else-if="a>=0.5" src="/ban.png" alt=""/>
        <img  v-else src="/none.png" alt=""/> -->
     </div>
     

  </div>

   <div class="footer"><span>导演:  </span> <span></span></div>
   <div class="footer"><span>详情:  </span> <span>{{list.labels}}</span></div>
   <div class="footer"><span>类型:  </span> <span>{{list.labels[2]}}</span></div>
  </div>


  </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
            count:[]
        }
    },
    methods:{
          handleBack(){
           this.$router.back()
       },
                getArrayStr(sum){
         var arr=[]
         for(var i=0;i<5;i++){
            
             if(sum>2){
               arr.push(2)
             }else if(sum>0){
               arr.push(Math.round(sum*10)/10)
             }else{
               arr.push(0)
             }
              sum=sum-2
         }
         return arr
       },
    },
  mounted(){
      var {id}=this.$route.query
      this.$http(`http://47.108.197.28:4000/api/movieDetail?id=${id}`).then(res=>{
          this.list=res.data.res[0]
          this.count= this.getArrayStr(res.data.res[0].rating)
      })
  }
}
</script>

<style scoped>
.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title{
  height: 0.9333rem;
  width: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(99, 131, 219);
}
.title p{
  font-size: 0.4667rem;
  color: white;
}
.banner{
  width: 10rem;
  height: 5.3333rem;
  background-color: rgba(161, 51, 51, 0.3);
  position: relative;
  /* filter: blur(20px); */
}
.banner_img{
  width: 10rem;
  height: 5.3333rem;
    filter: blur(0.2667rem);
}
.banner_box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding:1.0667rem 0.5333rem;
  display: flex;
  flex-direction: column;
  height: 2.6667rem;
  justify-content: space-between;
}
.banner_box div:nth-child(1){
    color: white;
    font-size: 0.5333rem;
}
.banner_box div:nth-child(2){
  color: white;
}
.banner_box_font span:nth-child(1){
     color: red;
     padding-right: 0.2667rem;
}
.banner_box_font span:nth-child(2){
  color:gray;
  padding-right: 0.5333rem;
}
.banner_box_font span:nth-child(3){
  color: red;
  padding-right: 0.2667rem;
}
.banner_box_font span:nth-child(4){
  color:gray;
  padding-right: 0.5333rem;
}
.banner_box_img{
  width: 2.4rem;
  height: 4rem;
  position: absolute;
  bottom: -1.3333rem;
  right: 0;

}
.footer span{
    font-size: 30px;
     color:gray;
  padding-left: 0.5333rem;
}
.body{
  width: 10rem;
  height: 5.3333rem;
}

.body_title{
  padding: 0.5333rem;
  font-weight: 600;
}
.body_detail{
  padding-left: 0.5333rem;
}
.body_detail div{
  color: gray;
  padding-top: 0.2667rem;
}
</style>